<template>
    <div class="artchild">
        <div class="title">{{ ES_92 }}</div>
        <a-table
            :columns="columns"
            :data-source="artchildData"
            :pagination="false"
            :scroll="scrollComp"
            bordered
            :style="{ minHeight: minHeight + 'px' }"
            size="middle"
            :loading="tableLoading"
            :row-class-name="(_record:any, index:number) => (index % 2 === 1 ? 'table-striped' : undefined)"
        >
        </a-table>
    </div>
</template>

<script setup lang="ts">
    import { ES } from "@/http/host";
    import { message } from "ant-design-vue";
    import { getContentTypeApi } from "@/api/esArticle";
    import { esHandleObj } from "@/utils/common";
    import { useCommonColumn, useScrollxy } from "@/hooks/useEsArticleCommon";
    const artchildData = ref([]);
    const tableLoading = ref(false);
    const { minHeight, scrollComp } = useScrollxy();
    //ES92服务器地址
    const ES_92 = ES[0];
    const columns = [
        {
            title: "文章索引",
            key: "index",
            dataIndex: "index"
        },
        {
            title: "分类标题",
            key: "key",
            dataIndex: "key"
        },
        ...useCommonColumn()
    ];

    //获取ES92文章索引列表
    const getEs92IndexInfo = async () => {
        tableLoading.value = true;
        getContentTypeApi().then((res) => {
            if (res.data.code === 200) {
                // @ts-ignore
                artchildData.value = esHandleObj(res.data.data).splice(0, 10);
                tableLoading.value = false;
            } else {
                message.error("获取失败!");
            }
        });
    };
    onMounted(() => {
        getEs92IndexInfo();
    });
</script>

<style lang="scss" scoped>
    .artchild {
        min-width: 1300px;
        .title {
            margin: 15px 0;
            font-size: 20px;
            text-align: center;
        }
        .n-data-table {
            width: 100%;
            margin: 0 auto;
        }
    }
    .ant-table-striped :deep(.table-striped) td {
        background-color: #fafafa;
    }
</style>
